<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>测试订单表单</title>
  <style>
    body {
      font-family: 'Microsoft YaHei', Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    h1 {
      color: #4285F4;
    }
    .form-group {
      margin-bottom: 15px;
    }
    label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }
    input, select, textarea {
      width: 100%;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
    }
    textarea {
      height: 80px;
    }
    button {
      background-color: #4285F4;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
    }
    button:hover {
      background-color: #3367d6;
    }
    .address-form {
      border: 1px solid #eee;
      padding: 20px;
      border-radius: 8px;
      background-color: #f9f9f9;
    }
  </style>
</head>
<body>
  <h1>测试订单表单</h1>
  <p>这是一个用于测试地址自动填写插件的表单页面。</p>
  
  <div class="address-form">
    <h2>收货地址</h2>
    <form id="address-form">
      <div class="form-group">
        <label for="receiver">收件人姓名</label>
        <input type="text" id="receiver" name="receiver" placeholder="请输入收件人姓名">
      </div>
      
      <div class="form-group">
        <label for="phone">手机号码</label>
        <input type="tel" id="phone" name="phone" placeholder="请输入手机号码">
      </div>
      
      <div class="form-group">
        <label for="province">省份</label>
        <select id="province" name="province">
          <option value="">请选择省份</option>
          <option value="11">北京市</option>
          <option value="12">天津市</option>
          <option value="13">河北省</option>
          <option value="31">上海市</option>
          <option value="32">江苏省</option>
          <option value="33">浙江省</option>
          <option value="44">广东省</option>
          <option value="51">四川省</option>
        </select>
      </div>
      
      <div class="form-group">
        <label for="city">城市</label>
        <select id="city" name="city" disabled>
          <option value="">请先选择省份</option>
        </select>
      </div>
      
      <div class="form-group">
        <label for="district">区/县</label>
        <select id="district" name="district" disabled>
          <option value="">请先选择城市</option>
        </select>
      </div>
      
      <div class="form-group">
        <label for="detailAddress">详细地址</label>
        <textarea id="detailAddress" name="detailAddress" placeholder="请输入详细地址，如街道、门牌号等"></textarea>
      </div>
      
      <div class="form-group">
        <label for="postcode">邮政编码</label>
        <input type="text" id="postcode" name="postcode" placeholder="请输入邮政编码">
      </div>
      
      <button type="submit">提交订单</button>
    </form>
  </div>
  
  <script>
    // 简单的省市区联动效果
    document.getElementById('province').addEventListener('change', function() {
      const citySelect = document.getElementById('city');
      const districtSelect = document.getElementById('district');
      
      // 清空并禁用区县选择器
      districtSelect.innerHTML = '<option value="">请先选择城市</option>';
      districtSelect.disabled = true;
      
      // 根据选择的省份加载城市
      if (this.value) {
        citySelect.disabled = false;
        citySelect.innerHTML = '<option value="">请选择城市</option>';
        
        // 模拟加载城市数据
        if (this.value === '11') { // 北京市
          citySelect.innerHTML += '<option value="1101">北京市</option>';
        } else if (this.value === '44') { // 广东省
          citySelect.innerHTML += '<option value="4401">广州市</option>';
          citySelect.innerHTML += '<option value="4403">深圳市</option>';
          citySelect.innerHTML += '<option value="4406">佛山市</option>';
        }
      } else {
        citySelect.disabled = true;
        citySelect.innerHTML = '<option value="">请先选择省份</option>';
      }
    });
    
    document.getElementById('city').addEventListener('change', function() {
      const districtSelect = document.getElementById('district');
      
      // 根据选择的城市加载区县
      if (this.value) {
        districtSelect.disabled = false;
        districtSelect.innerHTML = '<option value="">请选择区/县</option>';
        
        // 模拟加载区县数据
        if (this.value === '1101') { // 北京市
          districtSelect.innerHTML += '<option value="110101">东城区</option>';
          districtSelect.innerHTML += '<option value="110102">西城区</option>';
          districtSelect.innerHTML += '<option value="110105">朝阳区</option>';
          districtSelect.innerHTML += '<option value="110106">丰台区</option>';
        } else if (this.value === '4401') { // 广州市
          districtSelect.innerHTML += '<option value="440103">荔湾区</option>';
          districtSelect.innerHTML += '<option value="440104">越秀区</option>';
          districtSelect.innerHTML += '<option value="440105">海珠区</option>';
        }
      } else {
        districtSelect.disabled = true;
        districtSelect.innerHTML = '<option value="">请先选择城市</option>';
      }
    });
    
    // 表单提交事件
    document.getElementById('address-form').addEventListener('submit', function(e) {
      e.preventDefault();
      alert('表单已提交！');
    });
  </script>
</body>
</html>